<template>
  <div class="page-wrap">
    <h1 class="title">首页</h1>
    <button @click='goUser'>去个人中心</button>
    <button @click='show = !show'>改变动画</button>
    <transition name='fade'>
      <div class="box" v-show='show'></div>
    </transition>
    <hello-world msg="就呵呵了"></hello-world>
    <modal></modal>
    <slot-test>
      <span>这是一段文章哈哈哈哈哈....</span>
      <template #test="{data}">
        <span>名字：{{data.name}}</span>
        <span>年龄：{{data.age}}</span>
      </template>
    </slot-test>
  </div>
</template>

<script lang='ts'>
import { ref, defineComponent, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import Modal from '@components/Modal.vue'
import SlotTest from '@components/SlotTest.vue'
import { test } from '../utils/index'

export default defineComponent({
  components: { HelloWorld, Modal, SlotTest },
  setup () {
    const router = useRouter()
    console.log(router, '---ss')
    const goUser = () => {
      router.push({name: 'user'})
    }
    const test1 = async () => {
      let result = await test()
    }
    test1()
    onMounted(() => {
      console.log('onMounted')
    })
    console.log('onCreated')

    const show = ref(false)
    return {
      goUser,
      show
    }
  }
})
</script>
<style lang="scss" scoped>
.title {
  color: $orange;
}
.page-wrap {
  text-align: center;
}
.box {
  width: 50px;
  height: 50px;
  background-color: yellow;
}
</style>